<template>
  <div id="drawContainer" class="drawContainer">
    <!-- 巡检任务信息 -->
    <div class="box">
      <div class="title">巡检任务信息</div>
      <n-table bordered :single-line="false">
        <tbody class="tbody">
          <tr v-for="(it, i) in taskInfo" :key="it.label + i">
            <td class="label">{{ it.label }}</td>
            <td>{{ it.value }}</td>
          </tr>
        </tbody>
      </n-table>
    </div>

    <!-- 巡检结果 -->
    <div class="box">
      <div class="title">巡检结果</div>
      <n-table bordered :single-line="false">
        <tbody class="tbody">
          <tr>
            <td class="label">巡检内容</td>
            <td>巡检监测结果</td>
          </tr>
          <tr v-for="(item, index) in detail.inspectionResultVoList" :key="index">
            <td class="label">{{ item.questionTypeContent }}</td>
            <td>{{ item.count }}</td>
          </tr>
        </tbody>
      </n-table>
    </div>

    <!-- 问题清单 -->
    <div class="box">
      <div class="title">问题清单</div>
      <template v-for="(item, index) in detail.inspectionFileReportVoList" :key="index">
        <div class="subTitle">问题{{ index + 1 }}</div>
        <n-table bordered :single-line="false">
          <tbody class="tbody">
            <tr>
              <td class="label">坐标经纬度</td>
              <td>{{ item.longitude }},{{ item.latitude }}</td>
            </tr>
            <tr>
              <td class="label">问题描述</td>
              <td>{{ item.questionName }}</td>
            </tr>
            <tr>
              <td class="label">问题图片</td>
              <td>
                <img v-if="item.fileImage" :src="item.fileImage" class="img">
              </td>
            </tr>
            <template v-if="type === 2">
              <tr>
                <td class="label">处理人</td>
                <td>{{ item.inspectionFileHandleReportVo?.handlerUser }}</td>
              </tr>
              <tr>
                <td class="label">处理结果</td>
                <td>{{ item.inspectionFileHandleReportVo?.handlerResult }}</td>
              </tr>
              <tr>
                <td class="label">处理完成时间</td>
                <td>{{ item.inspectionFileHandleReportVo?.handlerTime }}</td>
              </tr>
              <tr v-for="(it, i) in item.inspectionFileHandleReportVo?.handlerImageList" :key="it+i">
                <td class="label">处理后图片{{ i + 1 }}</td>
                <td>
                  <img :src="it" class="img">
                </td>
              </tr>
            </template>
          </tbody>
        </n-table>
      </template>
    </div>
    <n-button :loading="downloadFlag" type="info" class="downBtn" @click="exportHandle">下载</n-button>
  </div>
</template>

<script setup name="ReportDrawComp">
import { ref } from 'vue'
import info from '../hook/info.js'
import { exportReport, exportReportHandle } from '@/api/report/index'
import { useUserStore } from '@/store/modules/user'

const props = defineProps({
  detail: {
    type: Object,
    required: true
  },
  type: {
    type: [String, Number],
    required: true // 1巡检报告，2处理报告
  }
})

const taskInfo = info(props.detail)

const userInfo = useUserStore().userInfo
const url = props.type === 1 ? exportReport : props.type === 2 ? exportReportHandle : ''
const downloadFlag = ref(false)

const exportHandle = () => {
  downloadFlag.value = true
  url(props.detail.id).then(res => {
    const blob = new Blob([res], { type: 'application/msword;charset=UTF-8' })
    const fileName = '航道巡检报告【' + props.detail.reportCode + '】'
    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = fileName
    link.click()
    window.URL.revokeObjectURL(link.href)
  }).catch((e) => {
    console.log(e)
  }).finally(() => {
    downloadFlag.value = false
  })
}

</script>

<style lang="scss" scoped>
.drawContainer {
  position: relative;
  width: 100%;
  height: 100%;
}

.box {
  width: 700px;
  margin: 10px auto;
  .title {
    font-size: 18px;
    font-family: Noto Sans SC-Medium, Noto Sans SC;
    font-weight: 500;
    color: #333333;
  }
  .subTitle {
    font-size: 16px;
    color: #1789FF;
  }

  .tbody {
    font-size: 14px;
    color: #333333;
    text-align: center;
    .label {
      width: 200px;
      background-color: rgba(23,137,255,0.03);
    }
    .img {
      width: 400px;
      aspect-ratio: auto;
    }
  }
}

.downBtn {
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 32px;
}
</style>
